<script setup lang="ts">
import {computed, ref, watch, onMounted} from "vue"
import * as echarts from "echarts";
import {
  queryWorkspace,
  queryDailyNv,
  queryStats
} from "./api"
import {
  IGetFrontVersion,
  IGetBackVersion
} from "@/api/version"

import { plotLine } from "@/func/plot";
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const workspace = ref<string>('')

type FacInfo = {
  name: string,
  isDir: boolean,
  mtime: string,
  Sharp_Nv: number,
  CR_Nv: number,
  Sharp_Nv_Long: number,
  Sharp_Nv_Short: number,
  hdays: number,
  version: number
};

const facInfo = ref<FacInfo[]>([])
const workspaceTable = ref(null)
const selectedFactor = ref<FacInfo|null>(null)
const previewChart = ref(null);
let version = ref<string>("")
let chartInst: echarts.ECharts | null = null

onMounted(() => {
  chartInst = echarts.init(previewChart.value);
  IGetBackVersion().then(
    (backVersion:string) => {
      version.value = "front: " + IGetFrontVersion() + "back: " + backVersion
    }
  )
});

function toDetail() {
  router.push({
    name: 'detail',
    params: {
      workspace: workspace.value,
      facName: selectedFactor.value? selectedFactor.value.name : ""
    },
  })
}

async function updateWorkspace(path:string) {
  const r = await queryWorkspace(workspace.value)
  if (r == null)
    return
  facInfo.value = []

  for (const f of r) {
    let stats = await queryStats(f.path)
    if (stats == null)
      continue
    facInfo.value.push({
      name: f.name,
      isDir: f.isDir,
      mtime: f.mtime,
      Sharp_Nv: stats.Sharp_Nv,
      CR_Nv:stats.CR_Nv,
      Sharp_Nv_Long:stats.Sharp_Nv_Long,
      Sharp_Nv_Short:stats.Sharp_Nv_Short,
      hdays:stats.hdays,
      version:stats.version
    })
  }
}

async function handleCurrentChange(val: any) {
  selectedFactor.value = val
};

watch(selectedFactor, async (val, oldVal) => {
  if (chartInst != null)
  {
    chartInst.clear();
    if (val==null)
      return;

    queryDailyNv(workspace.value + "/" + val.name).then(
      nv => plotLine(chartInst, nv.x, nv.y, val.name)
    ).catch(
        error =>console.error(error)
    )
  }
})

</script>

<template>
  <div style="
  position:absolute;
  top:0;
  left:0;">
    <el-row>
      <el-col>{{ version }}</el-col>
      <el-col :span="15">
        <el-input placeholder="请输入工作区" v-model="workspace" clearable></el-input>
      </el-col>
      <el-col :span="2" :offset="2">
        <el-button type="primary" @click="updateWorkspace(workspace)">设置</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-table
        ref="workspaceTable"
        :data="facInfo"
        highlight-current-row
        border
        @current-change="handleCurrentChange"
        @dblclick="toDetail"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="name"
          label="名称"
          width="120"
          sortable>
        </el-table-column>
        <el-table-column
          property="isDir"
          label="目录"
          width="80"
          sortable>
        </el-table-column>
        <el-table-column
          property="mtime"
          label="修改时间"
          width="200"
          sortable>
        </el-table-column>
        <el-table-column
          property="Sharp_Nv"
          label="夏普"
          width="100"
          sortable>
        </el-table-column>
        <el-table-column
          property="CR_Nv"
          label="卡吗"
          width="100"
          sortable>
        </el-table-column>
        <el-table-column
          property="Sharp_Nv_Long"
          label="多头夏普"
          width="120"
          sortable>
        </el-table-column>
        <el-table-column
          property="Sharp_Nv_Short"
          label="空头夏普"
          width="120"
          sortable>
        </el-table-column>
        <el-table-column
          property="hdays"
          label="持仓周期"
          width="120"
          sortable>
        </el-table-column>
        <el-table-column
          property="version"
          label="版本"
          width="100"
          sortable>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
  <el-card style="  
  position:absolute;
  top:50px;
  left:1200px;
  height:500px; 
  width: 500px;
  " shadow="never">
    <div ref="previewChart" style="height: 500px"></div>
  </el-card>
</template>
<style scoped>


h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
